<template>
  <div class="pg-page">
    <pg-navbar
        :username="app.userInfo.realname"
        @logout="handleLogout"
        @jump="handleJump"
    />
    <div class="pg-body p-20">
      <div class="w-1280 row m-auto">
        <div class="col-8">
          <div class="card px-20">
            <div class="card-title">
              快速搜索访问
            </div>
            <div class="card-body">
              <pg-search
                  auto-focus
                  auto-complete
                  :options="route_search_options"
                  @select="app.handleRouteRecords"
                  size="lg"
                  class="w-100"
                  placeholder="搜索二级模块名称（支持拼音模糊匹配）如：商品库、用户订单、sp、dd 等..."
              />
              <!--  最近访问列表 -->
              <div class="shortcut-list">最近访问</div>
              <div class="row route-records">
                <div class="col-12 empty" v-if="app.route_records.length <= 0">
                  暂时还没有访问记录～
                </div>
                <div class="col-3 mb-10" v-else v-for="item in app.route_records" :key="item.value">
                  <pg-button
                      size="sm"
                      block
                      color="light"
                      class="text-left"
                      @click="app.handleRouteRecords(item)"
                  >{{ item.label }}</pg-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card px-20 bg-user">
            <div class="card-title d-flex align-items-center divider-line-bottom pb-15">
              <div class="avatar">
                <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                  <defs>
                    <linearGradient x1="0%" y1="100%" x2="100%" y2="16.5090461%" id="linearGradient-1">
                      <stop stop-color="#E8F0FF" offset="0%"></stop>
                      <stop stop-color="#CCDDFF" offset="100%"></stop>
                    </linearGradient>
                    <path
                        d="M19,0 C8.512,0 0,8.512 0,19 C0,29.4861 8.512,38 19,38 C29.488,38 38,29.4861 38,19 C38,8.512 29.488,0 19,0"
                        id="path-2"></path>
                  </defs>
                  <g id="导航" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="总览页-填写" transform="translate(-984.000000, -123.000000)">
                      <g id="个人信息" transform="translate(964.000000, 100.000000)">
                        <g id="2019更新-icon-头像-默认头像-男的副本" transform="translate(19.000000, 20.000000)">
                          <g id="Page-1" transform="translate(1.000000, 3.000000)">
                            <rect id="矩形" x="0" y="0" width="48" height="48"></rect>
                            <g id="合并形状" transform="translate(4.000000, 5.000000)">
                              <mask id="mask-3" fill="white">
                                <use xlink:href="#path-2"></use>
                              </mask>
                              <use id="Mask" fill="url(#linearGradient-1)" opacity="0.419666109"
                                   xlink:href="#path-2"></use>
                              <path
                                  d="M15.3594948,25.1393725 C16.6445565,27.4257832 18.0357,28.8408938 19.0018429,28.8408938 C19.9874678,28.8408938 21.4154061,27.3681373 22.7217958,25 L27.7936372,25.9630113 C30.5110312,26.478974 32.5236021,28.7856976 32.6663894,31.5479538 L32.9945734,37.8967533 C33.0515951,38.99985 32.2035836,39.9403116 31.1004869,39.9973332 C31.0661001,39.9991108 31.031673,40 30.9972402,40 L7.00362174,40 C5.89905224,40 5.00362174,39.1045695 5.00362174,38 C5.00362174,37.9549423 5.00514438,37.9098975 5.00818707,37.8649426 L5.41483693,31.8568051 C5.59195864,29.2398817 7.44837442,27.0413166 9.99861965,26.4282019 L15.3594948,25.1393725 Z M12.0080716,13.8267826 C12.0027117,13.7185307 12,13.609582 12,13.5 C12,9.91014913 14.9101491,7 18.5,7 C22.0898509,7 25,9.91014913 25,13.5 C25,13.609582 24.9972883,13.7185307 24.9919284,13.8267826 C24.9972883,13.9702881 25,14.123672 25,14.2874143 C25,19.6515273 22.1061784,24 18.5,24 C14.8938216,24 12,19.6515273 12,14.2874143 C12,14.123672 12.0027117,13.9702881 12.0080716,13.8267826 Z"
                                  fill="#006DFF"
                                  opacity="0.5"
                                  mask="url(#mask-3)"
                              ></path>
                            </g>
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </div>
              <div class="userinfo ml-10">
                <div>{{ app.userInfo.phone }}</div>
                <div class="role">
                  权限级别：
                  <span class="overflow-ellipsis">{{ app.userInfo.opt_type === 'global' ? '总部' : '区域' }}</span>
                  <span class="is-admin" v-if="app.userInfo.is_admin">超级管理员</span>
                </div>
              </div>
            </div>
          </div>
          <div class="card px-20 mt-20 wechat-card">
            <div class="card-title">
              <svg width="18" height="18" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <g stroke="none" stroke-width="1" fill="#777" fill-rule="evenodd">
                  <g transform="translate(-985.000000, -264.000000)" fill="#777">
                    <g transform="translate(964.000000, 241.000000)">
                      <g transform="translate(21.000000, 23.000000)">
                        <path
                            d="M5.50201042,6.74798958 C4.81220964,6.74798958 4.25301563,6.18879557 4.25301563,5.49899479 C4.25301563,4.80919402 4.81220964,4.25 5.50201042,4.25 C6.19181119,4.25 6.75100521,4.80919402 6.75100521,5.49899479 C6.75100521,6.18879557 6.19181119,6.74798958 5.50201042,6.74798958 Z M10.4979896,6.74798958 C9.80818881,6.74798958 9.24899479,6.18879557 9.24899479,5.49899479 C9.24899479,4.80919402 9.80818881,4.25 10.4979896,4.25 C11.1877904,4.25 11.7469844,4.80919402 11.7469844,5.49899479 C11.7469844,6.18879557 11.1877904,6.74798958 10.4979896,6.74798958 Z M10.3447781,13.6945214 C9.60323537,13.8931321 8.81588073,14 8,14 C3.581722,14 0,10.8659932 0,7 C0,3.13400675 3.581722,0 8,0 C12.418278,0 16,3.13400675 16,7 C16,9.24777988 14.7891865,11.2481092 12.9071281,12.5288654 L13.7310151,14.5885828 C13.7925491,14.7424178 13.7177243,14.917009 13.5638893,14.978543 C13.4900151,15.0080927 13.407428,15.0070857 13.3342963,14.9757435 L10.3447781,13.6945214 Z M8,12 C11.3686986,12 14,9.69761131 14,7 C14,4.30238869 11.3686986,2 8,2 C4.63130136,2 2,4.30238869 2,7 C2,9.69761131 4.63130136,12 8,12 Z"
                        ></path>
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
              运营助手小程序
            </div>
            <div class="card-body">
              <div class="wechat-relevance">
                扫描小程序二维码，即可使用小程序版本运营助手，实时管理业务，提高工作效率。
              </div>
              <img class="wechat-qrcode" src="@/assets/qrcode-nyx.png" v-if="env === 'pro'"/>
              <img class="wechat-qrcode" src="@/assets/qrcode-nyx-dev.png" v-else/>
            </div>
          </div>
        </div>
      </div>
      <div class="w-1280 row m-auto" v-if="app.auth.isAdmin || (app.auth.SystemOperatorList && app.auth.SystemRoleList)">
        <div class="col-12">
          <div class="card mt-20">
            <div class="card-title">
              <pg-tabs v-model="tab">
                <pg-tab index="operator">运营人员</pg-tab>
                <pg-tab index="role">角色管理</pg-tab>
              </pg-tabs>
            </div>
            <div class="card-body">
              <operator v-show="tab === 'operator'"></operator>
              <role v-show="tab === 'role'"></role>
            </div>
          </div>
        </div>
      </div>
      <div class="w-1280 row m-auto" v-else-if="app.auth.SystemOperatorList">
        <div class="col-12">
          <div class="card mt-20">
            <div class="card-body">
              <operator></operator>
            </div>
          </div>
        </div>
      </div>
      <div class="w-1280 row m-auto" v-else-if="app.auth.SystemRoleList">
        <div class="col-12">
          <div class="card mt-20">
            <div class="card-body">
              <role></role>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import pgyos from '@/index';
  import { env } from './../env.config';
  import operator from './../views/operator/operator';
  import role from './../views/role/role';

  export default {
    name: 'Home',
    components: {
      operator,
      role,
    },
    inject: ['app'],
    data() {
      return {
        tab: 'operator',
      };
    },
    computed: {
      route_search_options() {
        return [];
      }
    },

    created() {
      document.title = '蒲公英运营管理中心';
      this.env = env;
    },

    methods: {
      handleLogout() {
        this.app?.handleLogout();
      },
      handleJump(item) {
        this.app?.handleRouteRecords(item)
      },
    },
  };
</script>

<style lang="scss" scoped>
  .w-1280 {
    width: 1240px;
  }

  .card {
    background-color: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .card-title {
    font-weight: 600;
    padding-top: 20px;
    font-size: 14px;
  }

  .card-body {
    padding: 15px 0 20px;
  }

  .shortcut-list {
    margin-top: 25px;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .route-records {
    height: 68px;

    .empty {
      margin-top: 20px;
      text-align: center;
      color: #bbb;
    }

  }

  .avatar,
  .userinfo {
    display: inline-block;
  }

  .card-title .role {
    font-size: 12px;
    color: #666;
    font-weight: 400;
  }

  .card-title .is-admin {
    background-color: #33d386;
    padding: 0 4px;
    color: #fff;
    line-height: 18px;
    display: inline-block;
    margin-left: 4px;
  }

  .card.wechat-card {
    padding-right: 0;
    background-image: url('');
    background-repeat: no-repeat;
    background-position: 230px bottom;
    position: relative;
    height: 137px;
  }

  .card-body .wechat-relevance {
    font-size: 12px;
    color: #888;
    width: 176px;
    line-height: 18px;
  }

  .card-body .wechat-qrcode {
    position: absolute;
    width: 80px;
    height: 80px;
    right: 55px;
    top: 42px;
  }

  .divider-line-bottom {
    border-bottom: 1px solid #e3e3e3;
  }

  .bg-user {
    background-image: url('');
    background-position: right top;
    background-repeat: no-repeat;
  }
</style>